<template>
  <div class="login">
    <div class="login-div">
      <el-row>
        <!-- span宽度占的份数，总共24分，offset向右的偏移量 -->
        <el-col :span="8" :offset="8" class="box">
          <div class="grid-content">
            <h3>小U商城后台管理系统</h3>
            <!-- model：表单的数据 -->
            <!-- rules：检验的规则 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <!-- label：显示文字 -->
              <!-- prop：数据以及校验对应的字段 -->
              <!-- prepend在输入框的前面，append在输入框的后面 -->
              <el-form-item prop="username">
                <el-input v-model="ruleForm.username">
                  <template slot="prepend"
                    ><i class="el-icon-user"></i
                  ></template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="ruleForm.password">
                  <template slot="prepend"
                    ><i class="el-icon-lock"></i
                  ></template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="login-btn"
                  type="primary"
                  @click="submitForm('ruleForm')"
                  >立即登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { userLogin } from "../api";
export default {
  data() {
    return {
      ruleForm: {
        username: "系统管理员",
        password: "123456",
      },
      // 具体校验规则
      rules: {
        // message 报错信息
        // trigger 触发方式
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      // this.$refs选择dom节点，方便后续操作
      // validate 校验函数，ui框架自带的功能
      this.$refs[formName].validate(async (valid) => {
        // valid值为真表示检验成功，发请求
        if (valid) {
          let res = await userLogin(this.ruleForm);
          if (res.code === 200) {
            // 登录成功
            // 通过vuex保存用户信息
            this.$store.commit("saveUserInfo", res.list);
            this.$router.push("/");
          }
        } else {
          // 值为假表示校验不通过
          console.log("填写有误");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login .login-div {
  /* viewport width/height */
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/img/loginbg.jpeg");
}
.login .grid-content {
  background-color: #fff;
  padding: 35px;
  margin-top: 150px;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .6);
}
.login .box h3 {
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: #fb6d49;
  margin-bottom: 20px;
}
.login .login-btn {
  width: 100%;
}
</style>